<script lang="ts" setup>
  import { CloudSearch, Suggest } from '@/http/api/search'
  import router from '@/router'
  import type { AutocompleteFetchSuggestionsCallback, ElAutocomplete } from 'element-plus'
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'

  interface Artist {
    alias: any | string[];
    id: number;
    name: string;
    tns: any | string[];
  }

  interface Album {
    id: number;
    name: string;
    pic: number;
    picUrl: string;
    pic_str: string;
    tns: any | string[];
  }

  interface SearchResult {
    al: Album;
    ar: Artist[];
    cd: string;
    id: number;
    mark: number;
    name: string;
    publishTime: number;
  }

  const props = defineProps({
    routerPath: {
      type: String,
      required: true,
    },
    routerQuery: Object,
  })
  const hint = useRoute().query.searchText as string
  const searchText = ref<any>(undefined)
  const searchEle = ref<InstanceType<typeof ElAutocomplete> | undefined>(undefined)
  const searchResult = ref<SearchResult[]>([
    {
      al: {
        id: 0,
        name: '',
        pic: 0,
        picUrl: '',
        pic_str: '',
        tns: [''],
      },
      ar: [
        {
          alias: [''],
          id: 0,
          name: '',
          tns: [''],
        },
      ],
      cd: '',
      id: 0,
      mark: 0,
      name: '',
      publishTime: 0,
    },
  ])
  const emit = defineEmits<{(event: 'update:modelValue', result: SearchResult[]): void }>()

  const getResult = async () => {
    searchResult.value = (await CloudSearch({ keywords: searchText.value })).result.songs
    router.push({ path: props.routerPath, query: { searchText: hint, ...props.routerQuery } })
    emit('update:modelValue', searchResult.value)
  }

  const search = () => {
    searchText.value = searchText.value || hint
    getResult()
  }
  const select = (item: {
    alg: string, feature: string, keyword: string, lastKeyword: string, type: number
  }) => {
    searchText.value = item.keyword
    getResult()
  }
  const suggestions = (keywords: string, callback: AutocompleteFetchSuggestionsCallback): void => {
    Suggest({ keywords }).then(res => callback(res.result.allMatch)).catch(() => callback([]))
  }

  onMounted(() => {
    searchEle.value!.focus()
  })
</script>

<template>
  <v-app-bar class="appBar" height="55" scroll-behavior="elevate">
    <template #prepend>
      <v-btn icon="mdi-arrow-left" @click="router.back()" />
    </template>

    <el-autocomplete
      ref="searchEle"
      v-model="searchText"
      clearable
      :debounce="500"
      :fetch-suggestions="suggestions"
      :placeholder="hint"
      select-when-unmatched
      :trigger-on-focus="false"
      @select="select"
    >
      <template #default="{ item }">
        <div class="suggestions">{{ item.keyword }}</div>
      </template>
      <template #prefix>
        <v-icon icon="mdi-magnify" size="20" style="margin-right: 10px" />
      </template>
    </el-autocomplete>
    <div class="search" @click="search">搜索</div>
  </v-app-bar>
</template>

<style lang="scss" scoped>
.appBar{
  background: #f8f9fc !important;
}
.search {
  width: 70px;
  font-size: 14px;
  text-align: center;
}

:deep(.el-input__wrapper) {
  border-radius: 25px;
}
</style>
